<!DOCTYPE html><html class="appearance-auto" lang="zh-CN"><head><meta charset="UTF-8"><title>【手撕Ngnix】网站跨域问题</title><meta name="description" content="用创业者心态做好每一件事情！"><meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, initial-scale=1"><!-- Google Analytics --><!-- End Google Analytics -->
<!-- Baidu Analytics --><!-- End Baidu Analytics --><link rel="icon" href="/blog/images/favicon.png"><link rel="stylesheet" href="/blog/style/common/bulma.css"><link rel="stylesheet" href="/blog/style/base.css"><link rel="stylesheet" href="/blog/style/common/helper.css"><script src="/blog/js/common.js"></script><link rel="stylesheet" href="/blog/style/post.css"><link rel="stylesheet" href="/blog/style/themes/highlight-theme-light.css"><script src="/blog/js/highlight.pack.js"></script><meta name="description" content="
网站跨域问题是游览器的一种安全策略，访问需要遵循同源策略


网站跨域问题网站跨域问题是游览器的一种安全策略，访问需要遵循同源策略 
解决方案： 1、jsonp 存在缺点：只能够支持get请求，不支持post请求  2、@CrossOrigin（小项目推荐） 3、Nginx 
location / &amp;#123;
    proxy_pass http://127.0.0.1:8080/;
    proxy_set_header Host              $host;
    proxy_set_header X-Real-IP         $remote_addr;
    proxy-set-header X-Forwarded-For   $proxy_add_x_forwarded_.."><!-- hexo injector head_end start -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hexo-math@4.0.0/dist/style.css">
<!-- hexo injector head_end end --><meta name="generator" content="Hexo 5.4.1"><link rel="alternate" href="/blog/atom.xml" title="janedler's blog" type="application/atom+xml">
</head><body class="is-flex is-flex-direction-column"><header class="header-widget is-flex-shrink-0 is-hidden-mobile"><div class="container is-fullhd is-flex is-justify-content-space-between is-align-items-center is-full-height"><section class="is-hidden-mobile is-flex-shrink-0"><h2><a href="/blog/">田园牧歌(*︶*)'s blog</a></h2></section><h3 class="is-hidden-mobile is-family-serif is-full-height is-flex is-align-items-center is-flex-shrink-0"><div class="is-full-height" id="postTopic"><p class="is-full-height is-flex-shrink-0 is-flex is-align-items-center is-justify-content-center">【手撕Ngnix】网站跨域问题</p><p class="is-full-height is-flex-shrink-0 is-flex is-align-items-center is-justify-content-center">点击返回顶部</p></div></h3><aside class="is-flex-shrink-0"><h3 class="is-inline-block"><a href="/blog/">首页</a></h3><h3 class="is-inline-block"><a href="/blog/about">关于</a></h3><h3 class="is-inline-block"><a href="/blog/archives">归档</a></h3></aside></div></header><header class="is-flex header-widget is-flex-shrink-0 is-align-items-center is-justify-content-center is-hidden-tablet"><h3 class="is-inline-block"><a href="/blog/">首页</a></h3><h3 class="is-inline-block"><a href="/blog/about">关于</a></h3><h3 class="is-inline-block"><a href="/blog/archives">归档</a></h3></header><main><main class="container is-max-widescreen content section post-page pt-4 px-4"><div class="columns is-flex-desktop is-justify-content-center is-flex-direction-row-reverse"><div class="column is-3 is-hidden-mobile"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%BD%91%E7%AB%99%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98"><span class="toc-text">网站跨域问题</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89-LJCrossOrigin"><span class="toc-text">自定义@LJCrossOrigin</span></a></li></ol></li></ol></li></ol></li></ol></li></ol></div><div class="column is-9"><header class="my-4"><a href="/blog/tags/Java"><i class="tag post-item-tag">Java</i></a><a href="/blog/tags/Ngnix"><i class="tag post-item-tag">Ngnix</i></a></header><h1 class="mt-0 mb-1 is-family-serif" id="postTitle">【手撕Ngnix】网站跨域问题</h1><time class="has-text-grey" datetime="2021-03-11T16:00:00.000Z">2021-03-12</time><article class="mt-2 post-content"><p><img src="https://janedler.oss-cn-beijing.aliyuncs.com/images/NGNIX.png" alt="NGNIX"></p>
<p>网站跨域问题是游览器的一种安全策略，访问需要遵循同源策略</p>
<span id="more"></span>

<h1 id="网站跨域问题"><a href="#网站跨域问题" class="headerlink" title="网站跨域问题"></a>网站跨域问题</h1><p>网站跨域问题是游览器的一种安全策略，访问需要遵循同源策略 <br/></p>
<p>解决方案： <br/><br>1、jsonp 存在缺点：只能够支持get请求，不支持post请求  <br/><br>2、@CrossOrigin（小项目推荐） <br/><br>3、Nginx <br/></p>
<pre><code class="bash">location / &#123;
    proxy_pass http://127.0.0.1:8080/;
    proxy_set_header Host              $host;
    proxy_set_header X-Real-IP         $remote_addr;
    proxy-set-header X-Forwarded-For   $proxy_add_x_forwarded_for;
&#125;
location /htmls/ &#123;
    root html;
    index index.html index.html
&#125;
</code></pre>
<p>前端页面放在htmls目录下，页面地址为http:127.0.0.1/htmls/index.html,后端接口请求地址为<a href="http://127.0.0.1:8080,通过nginx反向代理到后端接口">http://127.0.0.1:8080,通过nginx反向代理到后端接口</a> <br /></p>
<p>@CrossOrigin解决跨域问题原理？  <br/><br>在接口响应头（Response Header）上面加上了 Access-Control-Allow-Origin:* <br/></p>
<h5 id="自定义-LJCrossOrigin"><a href="#自定义-LJCrossOrigin" class="headerlink" title="自定义@LJCrossOrigin"></a>自定义@LJCrossOrigin</h5><p>注解底层实现原理？ <br /><br>AOP+反射机制 <br /><br>AOP：1、前置通知；2、后置通知；3、环绕通知；4、异常通知；<br /><br>代码：<a target="_blank" rel="noopener" href="https://gitee.com/janedler/code.git">https://gitee.com/janedler/code.git</a>  crossorigin <br /></p>
</article><section class="jump-container is-flex is-justify-content-space-between my-6"><!-- em is empty placeholder--><a class="button is-default" href="/blog/2022/09/23/SQL/SQLite-UPDATE%E5%91%BD%E4%BB%A4%E6%89%A7%E8%A1%8C%E8%AE%A1%E5%88%92/" title="【手撕SQL】SQLite UPDATE 命令执行计划"><i class="iconfont icon-prev mr-2 has-text-grey"></i><span class="has-text-weight-semibold">上一页: 【手撕SQL】SQLite UPDATE 命令执行计划</span></a></section><article class="mt-6 comment-container"><script async repo="janedler/blog" src="https://utteranc.es/client.js" issue-term="pathname" theme="preferred-color-scheme"></script></article></div></div></main></main><footer class="is-flex is-flex-direction-column is-align-items-center is-flex-shrink-0 is-family-serif"><section class="sns-container"><!-- Github--><a title="github" target="_blank" rel="noopener nofollow" href="//github.com//janedler"><i class="iconfont icon-github"></i></a><!-- Ins--><!-- RSS--><a title="rss" target="_blank" rel="noopener nofollow" href="/blog/atom.xml"><i class="iconfont icon-rss"></i></a><!-- 知乎--><!-- 领英--><!-- 脸书--></section><p><span>Copyright ©</span><span> 田园牧歌(*︶*) 2022</span></p><div class="is-flex is-justify-content-center is-flex-wrap-wrap"><p>Powered by Hexo &verbar;&nbsp;</p><p class="is-flex is-justify-content-center"><a title="Hexo theme author" target="_blank" rel="noopener" href="//github.com/haojen">Theme by Haojen&nbsp;</a></p><div style="margin-top: 2px"><a class="github-button" title="github-button" target="_blank" rel="noopener" href="https://github.com/haojen/hexo-theme-Claudia" data-color-scheme="no-preference: light; light: light; dark: dark;" data-show-count="true"></a></div></div><div><span></span></div></footer><script async defer src="https://buttons.github.io/buttons.js"></script><script src="/blog/js/post.js"></script></body></html>